<script setup>
import {computed, ref, toRefs} from "vue";

const props = defineProps({
  role: {
    type: String,
    default: 'assistant'
  },
  content: {
    type: String,
    default: ''
  },
  avatar:{
    type: String,
    default: ''
  }
})
//转化为响应式数据
const status = toRefs(props)
const content = status.content
const reContent = computed(()=>{
  let replacedContent =  content.value.replace(/\n/g, '<br>')
      .replace(/\s/g, '&nbsp;')
      .replace(/\t/g, '&nbsp;&nbsp;&nbsp;&nbsp;')
      .replace(/ /g, '&nbsp;')
      .replace(/\r/g, '');
   let length1 = (replacedContent.match(/\*\*/g) || []).length;
   //将**号包围的字体变成粗体
   for(let i = 1; i <= length1; i++){
     if (i % 2 === 1){
       replacedContent = replacedContent.replace('**', '<b>')
     }else {
       replacedContent = replacedContent.replace('**', '</b>')
     }
   }

  let length3 = (replacedContent.match(/```/g) || []).length;
   for (let i = 1; i <= length3; i++){
     if (i % 2 === 1){
       replacedContent = replacedContent.replace('```', '<pre>')
     }else {
       replacedContent = replacedContent.replace('```', '</pre>')
     }
   }

  // 将``号包围的字体添加背景
  let length2 = (replacedContent.match(/`/g) || []).length;
  for(let i = 1; i <= length2; i++){
    if (i % 2 === 1){
      replacedContent = replacedContent.replace('`', '<span style="background: #d2d2d2;padding: 1px 5px;border-radius: 6px;font-size: 13px;margin: 0 5px;color: #151414">')
    }else {
      replacedContent = replacedContent.replace('`', '</span>')
    }
  }

   return replacedContent;
})
</script>

<template>
  <div class="say-card">
    <img v-if="role === 'assistant'" src="@/assets/logo3.jpg" class="say-img" alt="头像">
    <img v-if="role === 'user'" :src="avatar" class="say-img" alt="头像">
    <div class="say-content">
      <p v-html="reContent" />
    </div>
  </div>
</template>

<style scoped>
.say-card{
  display: flex;
  margin-top: 25px;
  margin-left: 30px;
  margin-bottom: 25px;
  .say-img{
    border-radius: 10%;
    width: 50px;
    height: 50px;
  }
  .say-content{
    min-width: 20px;
    max-width: 1200px;
    background-color: #eaeaea;
    border-radius: 18px;
    padding: 0 16px;
    border: 1px solid #eeeeee;
    margin-left: 15px;
  }
}
</style>